import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'; //导入css
// import App from './App';
import reportWebVitals from './reportWebVitals';

/*
function Hello(props){  //函数名必须要大写开头
  return <h1>helloworld</h1>;
}
*/

const root = ReactDOM.createRoot(document.getElementById('root'));
//jsx
//const title=<h1 price="200">Hello React~</h1> //简易的jsx
/*复杂的jsx
let name='碰磕'
let age=18
let div=(
  <div className='box'> 
    <h1>hello JSX</h1>
    <p style={{'color':"red"}}>name={name},年龄={age}</p>
  </div>
)
*/
/*
//条件渲染
let flag=true;
function Login(user){
  if(flag){
    return <u>欢迎{user}登录</u>
  }
  return <u>还没登录呢</u>
}
const div=(
  <div>
    <h1>条件渲染</h1>
    {Login('碰磕')}
  </div>
)
*/

//循环
const number=[1,23,312,23,66];
//这里演示map方法,当然还有很多种
let ok =number.map((num)=>{
  return <li>{num}</li>; //jsx写法
})

const sz=[
  {uid:1,uname:'碰磕'},
  {uid:2,uname:'Student'},
  {uid:3,uname:'Study'}
]
let ok2 =(
<div className='box' >
  <ul>
  {sz.map((val)=>{
  return <li key={val.uid}>uid:{val.uid},uname:{val.uname}</li>;
  })}
  </ul>
</div>
)
root.render(
  // <React.StrictMode>
  //   <App />
  // </React.StrictMode>
  // <Hello />
  // div
  ok2
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
